import { useEffect, useState } from 'react';
import { Button, Col, Row, Space, Table } from 'antd';
import cs from 'classnames';
import classNames from 'classnames/bind';
import { fetchPendingListByBatch } from '@/api/archives/disposition';
import styles from '../../../../styles/doAppraisalDialog.module.scss';

const cx = classNames.bind(styles);
const { Column } = Table;

interface IListPaneProps {
  visible: boolean;
  batchId: number;
}
function ListPane(props: IListPaneProps) {
  const { visible, batchId } = props;
  const [list, setList] = useState([]);

  useEffect(() => {
    if (visible) {
      fetchPendingListByBatch(batchId).then((res) => {
        const { data } = res;
        setList(data);
      });
    }
  }, [visible]);

  return (
    <div className={cs(cx('appraisal-pane'), cx('list-pane'))}>
      <Row className={cs(cx('appraisal-operates'), cx('list-operates'))} justify="space-between">
        <Col>
          <Space>快捷录入鉴定档案</Space>
        </Col>
        <Col>
          <Space>
            <Button>批量删除</Button>
            <Button type="primary">批量鉴定</Button>
          </Space>
        </Col>
      </Row>
      <Table dataSource={list} rowKey="id" size="small" bordered>
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column title="档号" dataIndex="archiveNo" key="archiveNo" align="center" />
        <Column title="题名" dataIndex="title" key="title" align="center" />
        <Column title="年度" dataIndex="archiveTypeName" key="archiveTypeName" align="center" />
        <Column title="保管期限" dataIndex="departmentName" key="departmentName" align="center" />
        <Column title="鉴定结果" key="useDay" align="center" render={() => ''} />
        <Column title="鉴定建议" key="useDay" align="center" render={() => ''} />
        <Column
          title="操作"
          key="action"
          align="center"
          render={(_text, _record: any) => (
            <Space>
              <Button type="link">鉴定</Button>
              <Button type="link" danger>
                移除
              </Button>
            </Space>
          )}
        />
      </Table>
    </div>
  );
}

export default ListPane;
